$(function () {
  //渲染文章的分类列表
  const form = layui.form
  const layer = layui.layer
  const laypage = layui.laypage

  $.ajax({
    url: '/my/article/cates',
    type: 'GET',
    success: function (res) {
      if (res.status !== 0) {
        return layer.msg('获取文章列表失败')
      }
      renderList(res.data)
    }
  })

  // 使用模板引擎好像就没事
  function renderList(data) {
    let str = data.map(item => {
      return `
      <option value="${item.Id}">${item.name}</option>
      `
    }).join('')
    str = '<option value="">所有分类</option>' + str
    $('select[name="cate_id"]').html(str)
    form.render()
  }

  //将文章列表进行渲染
  let q = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
  }
  function artList() {
    $.ajax({
      type: 'GET',
      url: '/my/article/list',
      data: q,
      success: function (res) {
        console.log(res)
        if (res.status !== 0) {
          return layer.msg('文章列表获取失败')
        }
        // 渲染到页面
        renderArtList(res.data)
        renderPage(res.total)
      }
    })
  }

  //时间的处理函数
  function timeChange(time) {
    let data = new Date(time)
    let y = data.getFullYear()
    let m = (data.getMonth() + 1).toString().padStart(2, 0)
    let d = data.getDate().toString().padStart(2, 0)
    let hh = data.getHours().toString().padStart(2, 0)
    let mm = data.getMinutes().toString().padStart(2, 0)
    let ss = data.getSeconds().toString().padStart(2, 0)
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  }


  function renderArtList(data) {
    let str = data.map(function (item) {
      item.pub_date = timeChange(item.pub_date)
      return `
        <tr>
          <td>${item.title}</td>
          <td>${item.state}</td>
          <td>${item.pub_date}</td>
          <td>${item.cate_name}</td>
          <td>
            <button type="button" class="layui-btn layui-btn-xs edit" data-id="${item.Id}">编辑</button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.Id}">删除</button>
          </td>
        </tr>
      `
    }).join('')
    $('tbody').html(str)
  }
  artList()

  //科目的筛选
  $('#form-search').on('submit', function (e) {
    e.preventDefault()
    q.cate_id = $('[name="cate_id"]').val()
    q.state = $('[name="state"]').val()
    q.pagenum = 1
    artList()
  })

  //删除的功能
  $('tbody').on('click', '.btn-delete', function () {
    const id = $(this).attr('data-id')
    const count = $('.btn-delete').length
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
      //删除文章的操作
      $.ajax({
        url: '/my/article/delete/' + id,
        type: 'GET',
        success: function (res) {
          if (res.status !== 0) {
            return layer.msg('删除文章失败')
          }
          if (count === 1) {
            q.pagenum = q.pagenum === 1 ? q.pagenum : q.pagenum - 1
          }
          artList()
        }
      })
      layer.close(index)
    })

  })


  // 定义渲染分页的方法
  function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.pagesize, // 每页显示几条数据
      curr: q.pagenum, // 设置默认被选中的分页
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [2, 3, 5, 10],
      //jump回调函数

      jump: function (obj, first) {
        if (!first) {
          // 重新调用
          q.pagenum = obj.curr
          q.pagesize = obj.limit
          artList()
        }

      }
    })
  }

  //编辑文章
  $('tbody').on('click', '.edit', function () {
    //将欲编辑的文章进行储存
    const id = $(this).attr('data-id')
    localStorage.setItem('id',id)
    location.href = '/article/art_pub.html'
  })

})